<script setup lang="ts">
const list = reactive([{
  title: '副标题',
  path: '133443',
  children: [
    {
      title: '自选组合1',
      path: '1333'
    },
    {
      title: '自选组合2',
      path: '1412'
    },
    {
      title: '自选组合3',
      path: '1999'
    }
  ]
}]);

function handleClick (item, index) {
  console.log(item, index);
}

let value = $ref();

const collapse = ref(false);
</script>

<template>
  <vc-side-menu
    defaultActive="1412"
    :dragOption="{
       dragClassName: 'test',
       handle: '.drag-icon',
       filter: '.is-disabled'
    }"
    v-model:collapse="collapse"
    :useMenuSelect="false"
    showCollapse
    :width="300"
    :collapseWidth="0"
    :menus="list" :menuTopBottomHeight="70">
    <template #menuItem="{item, index}">
      <div @click="handleClick(item, index)"
        :class="['flex justify-between w-full', {'pointer-events-none': item?.disabled}]">
        <div class="flex">
          <!--图标-->
          <span class="ml-10px max-w-100px">{{ item.title }}</span>
        </div>
        <!--<div class="flex align-center">-->
        <!--  <el-button size="small" class="pointer-events-auto" @click="deleteItem(index)">删-->
        <!--  </el-button>-->
        <!--  <span class="drag-icon">排序</span>-->
        <!--</div>-->
      </div>
    </template>
  </vc-side-menu>
  <div class="ml-300px">
    <el-input v-model="value"/>
  </div>
</template>

